import React from 'react'
import { MenuOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';
import HeaderMenuItem from './HeaderMenuItem';

const HeaderMenu = (props: any) => {
    const HeaderMenuWrapper = styled.div`
        position: relative;
        color: white;
        padding-left: 240px;
        .ant-spin-nested-loading {
            height: 100%;
        }
    `;

    const MenuIcon = styled(MenuOutlined)`
        font-size: 14px;
        color: white;
        padding: 8px 12px;
        background-color: #252B48;
        border-radius: 2px;
        position: absolute;
        left: 160px;
        top: 14px;
    `;



    return (
        <HeaderMenuWrapper>
            <MenuIcon />
            <HeaderMenuItem loginData={props.loginData} />
        </HeaderMenuWrapper>
    )
}

export default HeaderMenu